<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/WEB-INF/tld/tag.tld" prefix="my"%>
<%@ taglib uri="/WEB-INF/tld/mobai-el-common.tld" prefix="el"%>
<!DOCTYPE html>
<html>

<head>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css"
	href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/style.css" />
<title>员工列表</title>
<style type="text/css">
#radius {
	margin: 0 auto;
	left: -200px;
}
</style>
</head>

<body style="margin:5px">
	<div class="page-container">
		<!-------------------------------综合查询开始---------------------------------------------------------------------------->
		<form action="/three/bsu/user" method="post" id="form1">
			<div class="text-c">
				<table style="height: 80px">
					<tr>
						<td align="right">员工账号：</td>
						<td align="left"><input type="text" name="account"
							style="width: 150px" class="input-text"></td>
						<td align="right">店铺名称：</td>
						<td align="left"><span class="select-box inline"> <select
								name="shopId" class="select" style="width: 139px">
									<option value=""></option>
									<c:forEach items="${shopList }" var="shop">
										<option value="${shop.shopId }">${shop.shopName }</option>
									</c:forEach>
							</select>
						</span></td>
						<td align="right">职位：</td>
						<td align="left"><span class="select-box inline"> <select
								name="postCode" class="select" style="width: 139px">
									<option value=""></option>
									<c:forEach items="${postList }" var="post">
										<option value="${post.postCode }">${post.postName }</option>
									</c:forEach>
							</select>
						</span></td>
						<td align="right">状态：</td>
						<td align="left"><span class="select-box inline"> <select
								name="status" class="select" style="width: 139px">
									<option value=""></option>
									<option value="0">离职</option>
									<option value="1">在职</option>
							</select>
						</span></td>
						<td rowspan="2"><button class="btn btn-success" type="submit">
								<i class="Hui-iconfont">&#xe665;</i> 查询
							</button></td>
					</tr>
					<tr>
						<td align="right">姓名：</td>
						<td align="left"><input type="text" name="username"
							style="width: 150px" class="input-text"></td>
						<td align="right">工号：</td>
						<td align="left"><input type="text" name="workNumber"
							style="width: 150px" class="input-text"></td>
						<td align="right">手机号：</td>
						<td align="left"><input type="text" name="mobile"
							style="width: 150px" class="input-text"></td>
						<td align="right">身份证号：</td>
						<td align="left"><input type="text" id="idno" name="idno"
							style="width: 150px" class="input-text"></td>
					</tr>
				</table>
			</div>
			<!--------------------------综合查询结束---------------------------------------------------------------------------->

			<!---------------------------------添加开始--------------------------------------------------->
			<div class="cl pd-5 bg-1 bk-gray mt-20">
				<span class="l"> <a style="text-decoration: none"
					class="btn btn-primary radius ml-5"
					onClick="user_add('/three/bsu/user_add')" href="javascript:;"><i
						class="Hui-iconfont">&#xe600;</i>添加员工信息</a>

				</span>
			</div>
			<!---------------------------------添加结束--------------------------------------------------->

			<!-----------------------------------显示所有开始------------------------------------------------->
			<div class="mt-20">
				<table
					class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
					<thead>
						<tr class="text-c">
							<th>员工账号</th>
							<th>姓名</th>
							<th>性别</th>
							<th>工号</th>
							<th>店铺名称</th>
							<th>职位</th>
							<th>手机号</th>
							<th>身份证号</th>
							<th>销售收入</th>
							<th>手工收入</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${userList }" var="user">
							<tr class="text-c">
								<td>${user.account }</td>
								<td>${user.username }</td>
								<td>${user.sex=="1"?"男":"女" }</td>
								<td>${user.workNumber }</td>
								<td><my:getShopName shopId="${user.shopId }"></my:getShopName>
								</td>
								<td>${user.bisShopPost.postName }</td>
								<td>${user.mobile }</td>
								<td>${user.idno }</td>
								<td>${user.saleincomes==null?"0.0":"user.saleincomes" }</td>
								<td>${user.handincomes==null?"0.0":"user.handincomes" }</td>
								<td>${user.status=="0"?"
										<font color='red'>离职</font>":"在职" }</td>
								<td class="f-14 td-manage"><a style="text-decoration: none"
									class="ml-5"
									onClick="user_update_password('${user.shopUserId}')"
									href="javascript:;" title="修改密码"><i class="Hui-iconfont">&#xe63f;</i></a>
									<a style="text-decoration: none" class="ml-5"
									onClick='user_edit(${el:toJsonString(user)})'
									href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>
									<a style="text-decoration: none" class="ml-5"
									onClick="nurse_del('${user.shopUserId}')" href="javascript:;"
									title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a></td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</form>
		<!-----------------------------显示所有结束------------------------------------------------------->

		<!------ ----------------------添加 修改员工信息模态框开始---------------------------------------------------- -->
		<div id="modal-demo" class="modal fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content radius" id="radius" style="width: 1000px">
					<div class="modal-header">
						<h3 class="modal-title">编辑员工信息</h3>
						<a class="close" data-dismiss="modal" aria-hidden="true"
							href="javascript:void();">×</a>
					</div>
					<div class="modal-body">
						<!------ ----------------------模态框内容部分开始---------------------------------------------------- -->
						<form class="form form-horizontal" id="form2" method="post"
							enctype="multipart/form-data">
							<input type="hidden" name="shopUserId" id="shopUserId"
								style="width: 250px" class="input-text radius" />
							<table style="height: 600px">
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3"><font
												color="red">*</font>员工账号：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" name="account" id="account"
													style="width: 250px" class="input-text radius" />
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">头像：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<span class="btn-upload form-group" id="span"> <input
													class="input-text upload-url radius" type="text"
													style="width: 185px;" name="uploadfile-1" id="uploadfile-1"
													readonly> <a href="javascript:void();"
													class="btn btn-primary radius"><i class="Hui-iconfont">&#xe642;</i></a>
													<input type="file" multiple name="file" id="file"
													class="input-file">
												</span> <span id="span1"> <img src="" alt="请上传图片" id="photo">
													<input type="hidden" name="photo" /> <a href="#"
													style="margin-top: 10px" class="btn btn-primary radius"
													id="xztp"><i class="Hui-iconfont">&#xe642;</i></a>
												</span>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3"><font
												color="red">*</font>姓名：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" name="username" style="width: 250px"
													class="input-text radius" />
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3"><font
												color="red">*</font>工号：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" name="workNumber" id="workNumber"
													style="width: 250px" class="input-text radius" />
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3"><font
												color="red">*</font>密码：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="password" name="password" id="password"
													style="width: 250px" class="input-text radius" />
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3"><font
												color="red">*</font>确认密码：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="password" name="toPassword" id="toPassword"
													style="width: 250px" class="input-text radius" />
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">性别：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<span class="select-box"> <select name="sex"
													class="select">
														<option value="1">男</option>
														<option value="2">女</option>
												</select>
												</span>
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">用户状态：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<span class="select-box"> <select name="status"
													class="select">
														<option value="1">在职</option>
														<option value="0">离职</option>
												</select>
												</span>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">店铺名称：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<span class="select-box"> <select name="shopId"
													class="select">
														<c:forEach items="${shopList }" var="shop">
															<option value="${shop.shopId }">${shop.shopName }</option>
														</c:forEach>
												</select>
												</span>
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">职位：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<span class="select-box"> <select name="postCode"
													class="select">
														<c:forEach items="${postList }" var="post">
															<option value="${post.postCode }">${post.postName }</option>
														</c:forEach>
												</select>
												</span>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">手机：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" id="mobile" name="mobile"
													style="width: 250px" class="input-text radius" />
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">身份证：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" name="idno" style="width: 250px"
													class="input-text radius" />
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">电话：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" name="phone" style="width: 250px"
													class="input-text radius" />
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">邮箱：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" name="email" style="width: 250px"
													class="input-text radius" />
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">出生日期：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="date" name="bornDate" id="bornDate"
													style="width: 250px" class="input-text radius" />
											</div>
										</div>
									</td>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">入职日期：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="date" name="entryDate" id="entryDate"
													style="width: 250px" class="input-text radius" />
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">紧急联系人：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" name="linkman" style="width: 250px"
													class="input-text radius" />
											</div>
										</div>
									</td>

									<td>
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">紧急联系电话：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" name="linkphone" style="width: 250px"
													class="input-text radius" />
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">居住地址：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<input type="text" name="address" style="width: 500px"
													class="input-text radius" />
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<div class="row cl">
											<label class="form-label col-xs-4 col-sm-3">备注：</label>
											<div class="formControls col-xs-6 col-sm-6">
												<textarea class="textarea radius" name="remark"
													style="white: 100px" rows="5" cols="10"></textarea>
											</div>
										</div>
									</td>
								</tr>
							</table>
						</form>
						<!------ ----------------------模态框内容部分结束---------------------------------------------------- -->
					</div>
					<div class="modal-footer">
						<button class="btn btn-secondary radius" type="button" id="but">
							<i class="Hui-iconfont">&#xe632;</i> 保存
						</button>
						<button class="btn radius" data-dismiss="modal" aria-hidden="true"
							id="guanbi">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 添加 修改员工信息模态框结束--------------------------------------------------- -->
	</div>
	<!------ ----------------------修改密码模态框开始---------------------------------------------------- -->
	<div id="modal" class="modal fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content radius">
				<div class="modal-header">
					<h3 class="modal-title">重置密码</h3>
					<a class="close" data-dismiss="modal" aria-hidden="true"
						href="javascript:void();">×</a>
				</div>
				<div class="modal-body">
					<!------ ----------------------模态框内容部分结束---------------------------------------------------- -->
					<form class="form form-horizontal" id="form3"
						action="/three/bsu/user_to_update_password" method="post">
						<table style="height: 100px">
							<tr>
								<td align="right"><span style="font-size: 15px">请输入新密码：</span></td>
								<td align="left"><input type="password" name="password"
									id="password2" style="width: 250px" class="input-text radius" /></td>
							</tr>
							<tr>
								<td align="right"><span style="font-size: 15px">确认密码：</span></td>
								<td align="left"><input type="password" name="toPassword"
									id="toPassword2" style="width: 250px" class="input-text radius" /></td>
							</tr>
						</table>
					</form>
					<!------ ----------------------模态框内容部分结束---------------------------------------------------- -->
				</div>
				<div class="modal-footer">
					<button class="btn btn-secondary radius" type="button" id="but2">
						<i class="Hui-iconfont">&#xe632;</i> 保存
					</button>
					<button class="btn radius" data-dismiss="modal" aria-hidden="true">关闭</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 修改密码模态框结束--------------------------------------------------- -->


	<script type="text/javascript"
		src="/three/lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="/three/static/formEdit.js"></script>
	<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script>
	<script type="text/javascript"
		src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
	<!--/_footer 作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript"
		src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript"
		src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript"
		src="/three/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
	<script type="text/javascript"
		src="/three/lib/jquery.validation/1.14.0/validate-methods.js"></script>
	<script type="text/javascript"
		src="/three/lib/jquery.validation/1.14.0/messages_zh.js"></script>
	<script type="text/javascript"
		src="/three/lib/jquery.validation/1.14.0/additional-methods.js"></script>
	<script type="text/javascript">
			/*员工信息-排序*/
			$('.table-sort').dataTable({
				"aaSorting": [
					[1, "desc"]
				], //默认第几个排序
				"bStateSave": true, //状态保存
				"pading": false,
				"aoColumnDefs": [
					//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
					{
						"orderable": false,
						"aTargets": [0, 8]
					} // 不参与排序的列
				]
			});

			/*员工信息-添加取值*/
			function user_add(url) {
				$("#modal-demo").modal("show");
				$("#span1").hide();
			}
			
			/*日期取值*/
			function getDate(date) {
				if(date != null) {
					var year = date.year + 1900;
					var month = date.month + 1;
					if(month < 10) {
						month = "0" + month;
					}
					var day = date.date;
					if(day < 10) {
						day = "0" + day;
					}
					var bornDate = year + "-" + month + "-" + day;
					//console.log(bornDate);
					return bornDate;
				}
			}

			/*护理项目-修改赋值*/
			function user_edit(user) {
				$("#modal-demo").modal("show");
				$("#form2").formEdit(user);
				$("#toPassword").val(user.password);
				$("#bornDate").val(getDate(user.bornDate));
				$("#entryDate").val(getDate(user.entryDate));
				$("#span").hide();
				$("#span1").show();
				$("#photo").attr("src", "http://localhost:8080/three" + user.photo);
				$("#xztp").on("click", function() {
					$("#span1").hide();
					$("#span").show();
				});
			};

			/*员工信息-刷新模态框*/
			$('#modal-demo').on('hidden.bs.modal', function() {
				window.location.reload();
			});

			/*员工信息-删除*/
			function nurse_del(shopUserId) {
				layer.confirm('确认要删除吗？', function(index) {
					//console.log(projectId+">>>");
					$("#form1").attr("action", "/three/bsu/user_del?shopUserId=" + shopUserId);
					$("#form1").submit();
					layer.msg('已删除!', {
						icon: 1,
						time: 1000
					});
				});
			};

			/*员工信息-添加++修改*/
			 $("#but").on("click", function() {
				if($("#shopUserId").val() == '') {
						$("#form2").attr("action","/three/bsu/user_to_add");
						$("#form2").submit();
				} else {
					$.ajax({
						 type: "post",
	                        url: "/three/bsu/delete",
	                        dataType: "json",
	                        dataFilter: function (msg) {
	                            if (msg == "true") {
	                            	console.log("修改");
	            					$("#form2").attr("action","/three/bsu/user_update");
	            					$("#form2").submit();
	                            }
	                        }
					});
				}
			}); 

			/*员工信息-修改密码打开模态框*/
			function user_update_password(shopUserId) {
				$("#modal").modal("show");
				/*员工信息-修改密码*/
				$("#but2").on("click", function() {
					if($("#password2").val() == $("#toPassword2").val()) {
						layer.confirm('确认要修改吗？', function(index) {
							//console.log($("#toPassword2").val());
							$("#form3").attr("action", "/three/bsu/user_update_password?shopUserId=" + shopUserId + "&password2=" + $("#toPassword2").val());
							$("#form3").submit();
							layer.msg('已修改!', {
								icon: 1,
								time: 1000
							});
						});
					} else {
						alert("两次密码输入不一致！！！");
					}
				});
			}

			//判断员工账号和工号不能重复
			$("#account").on("blur",function(){
				pdaccount("/three/bsu/account?account="+$("#account").val());
			});
			function pdaccount(url) {
				$.ajax({
					type: "post",
	                url: url,
	                dataType: "json",
	                dataFilter: function (msg) {
	                    if (msg != "true") {
	                    	alert("员工账号重复");
	                    	 $("#account").val("");
	                    }
	                }
				});
			}
			$("#workNumber").on("blur",function(){
				pdworkNumber("/three/bsu/workNumber?workNumber="+$("#workNumber").val());
			});
			function pdworkNumber(url) {
				$.ajax({
					type: "post",
	                url: url,
	                dataType: "json",
	                dataFilter: function (msg) {
	                    if (msg != "true") {
	                        alert("工号重复");
	                        $("#workNumber").val("");
	                    }
	                }
				});
			}
			//表单验证
			$("#form2").validate({
				rules: {
					account: { //账号
						required: true,
					},
					file:{//头像
						accept:"JPG|PNG",
					},
					username: { //姓名
						required: true,
					},
					workNumber: { //工号
						required: true,
					},
					password: { //密码
						required: true,
					},
					toPassword: { //确认密码
						required: true,
						equalTo: "#password",
					},
					mobile: { //手机
                        isMobile: true,
					},
					idno: { //身份证
						isIdCardNo: true,
					},
					phone: { //电话
                        isPhone:true,
					},
					email: { //邮箱
						email: true,
					},
					linkphone: { //紧急联系电话
                        isTel:true,
					},
				},
				messages: {
					account: {
						required: "账号不能为空！",
	                },
					workNumber: {
						required: "工号不能为空！",
					},
	            },
				onkeyup: false,
				focusCleanup: true,
			});
		</script>
</body>

</html>